body{
    width: 100%;
    background-color: #FAFAFA;
}
.head{
    background-color: #CC0000;
}

.nav-tit{
    font-size:0.18rem;
    font-family:PingFang-SC-Regular;
    font-weight:500;
    color:#FFFFFF;
    line-height:0.44rem;
    text-align: center;
}
.mui-content{
    margin-bottom: 0.5rem;
}
/*名片展示内容*/
.content{
    width:100%;
    height:1.45rem;
    background-color: #FFFFFF;
    box-shadow:0px 1.5px 5px 0px rgba(0, 0, 0, 0.05);
}
/*让内容靠中间显示*/
.outside{
    width: 93%;
    margin: 0 auto; 
    position: relative;
}
/* 排序与状态 */
.outside > div:first-child{
    width:0.38rem;
    height:0.2rem;
    position: absolute;
    top: 0.1rem;
    left: 0;
    font-size:0.11rem;
    font-family:PingFangSC-Light;
    line-height: 0.2rem;
    color:#000;
    text-align: center;
    background-color:rgba(255,255,255,1);
}
.mui-content .dy:nth-child(1) .topColor{
    background-color: #f00;
    color: #fff;
}
.mui-content .dy:nth-child(2) .topColor{
    background-color: #EA802A;
    color: #fff;
}
.mui-content .dy:nth-child(3) .topColor{
    background-color: #EABB2A;
    color: #fff;
}
.mui-content .dy:nth-child(1) .writeClass{
    background: #fff;
    color: #000;
}
.mui-content .dy:nth-child(2) .writeClass{
    background: #fff;
    color: #000;
}
.mui-content .dy:nth-child(3) .writeClass{
    background: #fff;
    color: #000;
}
/*名片*/
.imgBox{
    width:100%;
    display: flex;
}
.card{
    width: 50%;
    height: 0.84rem;
    margin-top: 0.1rem;
}
/*名片名字*/
.name{
    font-size:0.12rem;
    font-family:PingFangSC-Light;
    font-weight:300;
    color:#333333;
}
/*浏览次数、点赞个数及评论*/
.number{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
/* 操作选项卡 */
.card-pop{
    width: 1rem;
    height: 0.22rem;
    position: absolute;
    right: 0.25rem;
    bottom: 0;
    background: url("../images/index_backbj.png") no-repeat;
    background-size: cover;
    display: none;
}
.card-box{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.card-box>img{
    width: 0.01rem;
    height: 0.13rem;
}
.card-pop li:first-child{
    padding-left: 0.04rem;
}
.card-pop li:first-child>img{
    width: 0.12rem;
    height: 0.11rem;
}
.card-pop li:last-child{
    padding-right: 0.05rem;
}
.card-pop li:last-child>img{
    width: 0.12rem;
    height: 0.12rem;
}
.card-pop span{
    font-size:0.11rem;
    font-family:PingFangSC-Light;
    color:rgba(255,255,255,1);
}

.n1{
    display: flex;
    flex: 1;
    align-items: center;
}
.n2{
    display: flex;
    flex: 1;
    justify-content: flex-end;
    align-items: center;
}
/*浏览次数图片*/
.img1{
    width:0.13rem;
    height:0.09rem;
}
/*浏览次数*/
.look{
    font-size:0.11rem;
    font-family:PingFangSC-Light;
    font-weight:bold;
    color:#999393;
    margin-left: 0.05rem;
}
/*点赞图片*/
.img2{
    width:0.1rem;
    height:0.1rem;
    margin-right: 0.05rem;
}
/*点赞次数*/
.dz{
    font-size:0.11rem;
    font-family:PingFangSC-Light;
    font-weight:bold;
    color:#D81E06;
    margin-right: 0.16rem;
}
/*评论图片*/
.img3{
    width:0.2rem;
    height:0.1rem;
    border-radius:5px;
}
/*图片与下一个图片之间的距离*/
.jl{
    height: 0.1rem;
}
/*底部栏*/
.foot{
    width: 100%;
    height: 0.5rem;
    background-color: #CC0000;
    position: fixed;
    bottom: 0;
    display: flex;
    flex-direction: row;
}
.foot>a{
    width: 33.3%;
    height: 0.5rem;
    display: block;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}
.foot>a>img{
    max-width: 0.18rem;
    max-height:0.17rem;
    margin-top: 0.05rem;
}
.foot>a>span{
    font-size:0.12rem;
    font-family:PingFangSC-Light;
    font-weight:300;
    color:rgba(255,255,255,1);
}
.foot a:nth-child(2)>span{
    color: #ffff00;
}